Frontend Web Lock Tizimining Tiqilib Qolishini Aniqlash: Resurslarni Qulflash Tsiklining Oldini Olish

Tiqilib qolishlar (deadlocks), parallel dasturlashdagi mashhur muammo bo'lib, faqat backend tizimlariga xos emas. Frontend veb-ilovalar, ayniqsa asinxron operatsiyalar va murakkab holat boshqaruvidan foydalanadiganlar ham bunga moyil. Ushbu maqola frontend veb-ishlab chiqishda tiqilib qolishlarni tushunish, aniqlash va oldini olish bo'yicha to'liq qo'llanmani taqdim etadi, bunda resurslarni qulflash siklining oldini olishning muhim jihatlariga e'tibor qaratiladi.

Frontendda Tiqilib Qolishlarni Tushunish

Tiqilib qolish (deadlock) ikki yoki undan ortiq jarayon (bizning holatimizda, brauzerda ishlayotgan JavaScript kodi) bir-birini resursni bo'shatishini kutib, cheksiz bloklanganda yuzaga keladi. Frontend kontekstida resurslarga quyidagilar kirishi mumkin:

• JavaScript Obyektlari: Umumiy ma'lumotlarga kirishni nazorat qilish uchun myutekslar yoki semaforlar sifatida ishlatiladi.
• Local Storage/Session Storage: Saqlash omboriga kirish va uni o'zgartirish raqobatga olib kelishi mumkin.
• Veb Ishchilar (Web Workers): Asosiy oqim va ishchilar o'rtasidagi aloqa bog'liqliklarni yaratishi mumkin.
• Tashqi API'lar: Bir-biriga bog'liq bo'lgan API javoblarini kutish tiqilib qolishlarga olib kelishi mumkin.
• DOM manipulyatsiyasi: Keng ko'lamli va sinxronlashtirilgan DOM operatsiyalari, kamroq uchrasa-da, bunga hissa qo'shishi mumkin.

An'anaviy operatsion tizimlardan farqli o'laroq, frontend muhiti asosan bir oqimli hodisalar tsikli (event loop) cheklovlari ostida ishlaydi. Veb Ishchilar parallellikni joriy etsa-da, ular va asosiy oqim o'rtasidagi aloqa tiqilib qolishlarning oldini olish uchun ehtiyotkorlik bilan boshqarilishi kerak. Asosiy masala shundaki, asinxron operatsiyalar, Promise'lar va `async/await` resurslarga bog'liqlik murakkabligini yashirishi mumkin, bu esa tiqilib qolishlarni aniqlashni qiyinlashtiradi.

Tiqilib Qolishning To'rt Sharti (Koffman Shartlari)

Tiqilib qolish yuzaga kelishi uchun zarur bo'lgan va Koffman shartlari deb nomlanuvchi shartlarni tushunish uning oldini olish uchun juda muhim:

1. O'zaro Istisno (Mutual Exclusion): Resurslarga faqat bitta jarayon tomonidan kiriladi. Bir vaqtning o'zida bitta resursni faqat bitta jarayon egallashi mumkin.
2. Ushlab Turish va Kutish (Hold and Wait): Jarayon bir resursni ushlab turgan holda boshqa resursni kutadi.
3. Majburiy Tortib Olmaslik (No Preemption): Resursni uni ushlab turgan jarayondan majburan tortib olish mumkin emas. U ixtiyoriy ravishda bo'shatilishi kerak.
4. Aylanma Kutish (Circular Wait): Jarayonlarning aylanma zanjiri mavjud bo'lib, unda har bir jarayon zanjirdagi keyingi jarayon tomonidan ushlab turilgan resursni kutadi.

Tiqilib qolish faqatgina ushbu to'rtta shartning barchasi bajarilgandagina yuzaga kelishi mumkin. Shu sababli, tiqilib qolishning oldini olish ushbu shartlardan kamida bittasini buzishni o'z ichiga oladi.

Resurslarni Qulflash Tsiklini Aniqlash: Oldini Olishning Asosi

Frontendda eng ko'p uchraydigan tiqilib qolish turi qulflarni olish paytidagi aylanma bog'liqliklardan kelib chiqadi, shuning uchun "resurslarni qulflash sikli" atamasi ishlatiladi. Bu ko'pincha ichma-ich joylashgan asinxron operatsiyalarda namoyon bo'ladi. Keling, bir misol bilan ko'rib chiqamiz:

Misol (Soddalashtirilgan Tiqilib Qolish Stsenariysi):

            // Qulflarni oladigan va bo'shatadigan ikkita asinxron funksiya
async function operationA(resource1, resource2) {
  await acquireLock(resource1);
  try {
    await operationB(resource2, resource1); // operationB ni chaqiradi, ehtimol resource2 ni kutadi
  } finally {
    releaseLock(resource1);
  }
}

async function operationB(resource2, resource1) {
  await acquireLock(resource2);
  try {
    // Biror operatsiyani bajarish
  } finally {
    releaseLock(resource2);
  }
}

// Soddalashtirilgan qulfni olish/bo'shatish funksiyalari
const locks = {};

async function acquireLock(resource) {
  return new Promise((resolve) => {
    if (!locks[resource]) {
      locks[resource] = true;
      resolve();
    } else {
      // Resurs bo'shatilguncha kutish
      const interval = setInterval(() => {
        if (!locks[resource]) {
          locks[resource] = true;
          clearInterval(interval);
          resolve();
        }
      }, 50); // So'rovlar intervali
    }
  });
}

function releaseLock(resource) {
  locks[resource] = false;
}

// Tiqilib qolishni simulyatsiya qilish
async function simulateDeadlock() {
  await operationA('resource1', 'resource2');
  await operationB('resource2', 'resource1');
}

simulateDeadlock();

            

              
                Copy
              
            
          

Ushbu misolda, agar `operationA` `resource1` ni olib, so'ng `resource2` ni kutayotgan `operationB` ni chaqirsa va `operationB` shunday chaqirilsaki, u avval `resource2` ni olishga harakat qilsa, lekin bu chaqiruv `operationA` tugab `resource1` ni bo'shatmasdan oldin sodir bo'lsa va u `resource1` ni olishga harakat qilsa, bizda tiqilib qolish yuzaga keladi. `operationA` `operationB` ning `resource2` ni bo'shatishini kutmoqda, `operationB` esa `operationA` ning `resource1` ni bo'shatishini kutmoqda.

Aniqlash Usullari

Frontend kodida resurslarni qulflash sikllarini aniqlash qiyin bo'lishi mumkin, ammo bir nechta usullarni qo'llash mumkin:

1. Tiqilib Qolishning Oldini Olish (Loyiha Bosqichida): Eng yaxshi yondashuv – bu ilovani boshidanoq tiqilib qolishlarga olib keladigan sharoitlardan qochadigan qilib loyihalashdir. Quyida oldini olish strategiyalariga qarang.
2. Qulflarni Tartiblash: Qulflarni olishda izchil tartibni joriy qiling. Agar barcha jarayonlar qulflarni bir xil tartibda olsa, aylanma kutishning oldi olinadi.
3. Taymautga Asoslangan Aniqlash: Qulflarni olish uchun taymautlarni joriy qiling. Agar jarayon qulfni belgilangan taymautdan uzoqroq kutsa, u tiqilib qolish yuzaga kelgan deb hisoblab, joriy qulflarini bo'shatishi mumkin.
4. Resurslarni Taqsimlash Graflari: Tugunlari jarayonlar va resurslarni ifodalovchi yo'naltirilgan graf yarating. Qirralar resurs so'rovlari va taqsimotlarini ifodalaydi. Grafdagi sikl tiqilib qolishni bildiradi. (Buni frontendda amalga oshirish ancha murakkab).
5. Nosozliklarni Tuzatish Asboblari: Brauzerning ishlab chiquvchi vositalari to'xtab qolgan asinxron operatsiyalarni aniqlashga yordam beradi. Hech qachon bajarilmaydigan (resolve) promise'larni yoki cheksiz bloklangan funksiyalarni qidiring.

Oldini Olish Strategiyalari: Koffman Shartlarini Buzish

Tiqilib qolishlarning oldini olish ko'pincha ularni aniqlash va tiklashdan ko'ra samaraliroqdir. Quyida Koffman shartlarining har birini buzish strategiyalari keltirilgan:

1. O'zaro Istisnoni Buzish

Ushbu shart ko'pincha muqarrar, chunki ma'lumotlar yaxlitligi uchun resurslarga eksklyuziv kirish zarur. Biroq, ma'lumotlarni umuman birgalikda ishlatishdan qochish mumkinligini o'ylab ko'ring. O'zgarmaslik (immutability) bu yerda kuchli vosita bo'lishi mumkin. Agar ma'lumotlar yaratilgandan keyin hech qachon o'zgarmasa, uni qulflar bilan himoya qilishga hojat yo'q. Immutable.js kabi kutubxonalar bunga erishishda yordam berishi mumkin.

2. Ushlab Turish va Kutishni Buzish

• Barcha Qulflarni Birdaniga Olish: Qulflarni bosqichma-bosqich olish o'rniga, operatsiya boshida barcha kerakli qulflarni oling. Agar biror qulf olinmasa, barcha qulflarni bo'shatib, keyinroq qayta urinib ko'ring.
• TryLock: Bloklamaydigan `tryLock` mexanizmidan foydalaning. Agar qulf darhol olinmasa, jarayon boshqa vazifalarni bajarishi yoki joriy qulflarini bo'shatishi mumkin. (Aniq bir vaqtda ishlash xususiyatlarisiz standart JS muhitida kamroq qo'llaniladi, ammo kontseptsiyani ehtiyotkor Promise boshqaruvi bilan taqlid qilish mumkin).

Misol (Barcha Qulflarni Birdaniga Olish):

            async function operationC(resource1, resource2) {
  let lock1Acquired = false;
  let lock2Acquired = false;
  try {
    lock1Acquired = await tryAcquireLock(resource1);
    if (!lock1Acquired) {
      return false; // lock1 ni olib bo'lmadi, bekor qilish
    }

    lock2Acquired = await tryAcquireLock(resource2);
    if (!lock2Acquired) {
      releaseLock(resource1);
      return false; // lock2 ni olib bo'lmadi, bekor qilish va lock1 ni bo'shatish
    }

    // Ikkala resurs qulflangan holda operatsiyani bajarish
    console.log('Both locks acquired successfully!');
    return true;

  } finally {
    if (lock1Acquired) {
      releaseLock(resource1);
    }
    if (lock2Acquired) {
      releaseLock(resource2);
    }
  }
}

async function tryAcquireLock(resource) {
    if (!locks[resource]) {
      locks[resource] = true;
      return true; // Qulf muvaffaqiyatli olindi
    } else {
      return false; // Qulf allaqachon olingan
    }
}

            

              
                Copy
              
            
          

3. Majburiy Tortib Olmaslikni Buzish

Oddiy JavaScript muhitida resursni funksiyadan majburan tortib olish qiyin. Biroq, muqobil patternlar majburiy tortib olishni simulyatsiya qilishi mumkin:

• Taymautlar va Bekor Qilish Tokenlari: Jarayon qulfni ushlab turishi mumkin bo'lgan vaqtni cheklash uchun taymautlardan foydalaning. Agar taymaut tugasa, jarayon qulfni bo'shatadi. Bekor qilish tokenlari jarayonga o'z qulflarini ixtiyoriy ravishda bo'shatish uchun signal berishi mumkin. `AbortController` kabi kutubxonalar (garchi asosan fetch API so'rovlari uchun bo'lsa-da) moslashtirilishi mumkin bo'lgan shunga o'xshash bekor qilish imkoniyatlarini taqdim etadi.

Misol (`AbortController` bilan Taymaut):

            async function operationWithTimeout(resource, timeoutMs) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => {
    controller.abort(); // Taymautdan keyin bekor qilish signali
  }, timeoutMs);

  try {
    await acquireLock(resource, controller.signal);
    console.log('Qulf olindi, operatsiya bajarilmoqda...');
    // Uzoq davom etadigan operatsiyani simulyatsiya qilish
    await new Promise(resolve => setTimeout(resolve, 2000));

  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Operatsiya taymaut tufayli bekor qilindi.');
    } else {
      console.error('Operatsiya davomida xatolik:', error);
    }
  } finally {
    clearTimeout(timeoutId);
    releaseLock(resource);
    console.log('Qulf bo\'shatildi.');
  }
}

async function acquireLock(resource, signal) {
  return new Promise((resolve, reject) => {
    if (locks[resource]) {
      const intervalId = setInterval(() => {
        if (!locks[resource]) {
            locks[resource] = true; //Olishga urinish
            clearInterval(intervalId);
            resolve();
        }
      }, 50);

      signal.addEventListener('abort', () => {
        clearInterval(intervalId);
        reject(new Error('Aborted'));
      });

    } else {
      locks[resource] = true;
      resolve();
    }

  });
}

            

              
                Copy
              
            
          

4. Aylanma Kutishni Buzish

• Qulflarni Tartiblash (Iyerarxiya): Barcha resurslar uchun global tartibni o'rnating. Jarayonlar qulflarni shu tartibda olishi kerak. Bu aylanma bog'liqliklarning oldini oladi.
• Ichma-ich Qulf Olishdan Saqlanish: Ichma-ich qulf olishlarni minimallashtirish yoki yo'q qilish uchun kodni refaktoring qiling. Bir nechta qulflarga bo'lgan ehtiyojni kamaytiradigan muqobil ma'lumotlar tuzilmalari yoki algoritmlarni ko'rib chiqing.

Misol (Qulflarni Tartiblash):

            // Resurslar uchun global tartibni belgilash
const resourceOrder = ['resourceA', 'resourceB', 'resourceC'];

async function operationWithOrderedLocks(resource1, resource2) {
  const index1 = resourceOrder.indexOf(resource1);
  const index2 = resourceOrder.indexOf(resource2);

  if (index1 === -1 || index2 === -1) {
    throw new Error('Invalid resource name.');
  }

  // Qulflarning to'g'ri tartibda olinishini ta'minlash
  const firstResource = index1 < index2 ? resource1 : resource2;
  const secondResource = index1 < index2 ? resource2 : resource1;

  try {
    await acquireLock(firstResource);
    try {
      await acquireLock(secondResource);
      // Ikkala resurs qulflangan holda operatsiyani bajarish
      console.log(`Operation with ${firstResource} and ${secondResource}`);
    } finally {
      releaseLock(secondResource);
    }
  } finally {
    releaseLock(firstResource);
  }
}

            

              
                Copy
              
            
          

Frontendga Xos Mulohazalar

• Bir Oqimli Tabiat: JavaScript asosan bir oqimli bo'lsa-da, asinxron operatsiyalar ehtiyotkorlik bilan boshqarilmasa, baribir tiqilib qolishlarga olib kelishi mumkin.
• UI Sezgirligi: Tiqilib qolishlar foydalanuvchi interfeysini (UI) muzlatib qo'yishi va yomon foydalanuvchi tajribasini taqdim etishi mumkin. Puxta sinov va monitoring muhim ahamiyatga ega.
• Veb Ishchilar (Web Workers): Asosiy oqim va Veb Ishchilar o'rtasidagi aloqa tiqilib qolishlarning oldini olish uchun ehtiyotkorlik bilan tashkil etilishi kerak. Xabar uzatishdan foydalaning va iloji boricha umumiy xotiradan saqlaning.
• Holat Boshqaruvi Kutubxonalari (Redux, Vuex, Zustand): Holat boshqaruvi kutubxonalaridan foydalanganda, ayniqsa holatning bir nechta qismlarini o'z ichiga olgan murakkab yangilanishlarni amalga oshirayotganda ehtiyot bo'ling. Reducer'lar yoki mutatsiyalar o'rtasidagi aylanma bog'liqliklardan saqlaning.

Amaliy Misollar va Kod Parchalari (Murakkab)

1. Resurslarni Taqsimlash Grafi Yordamida Tiqilib Qolishni Aniqlash (Kontseptual)

JavaScript-da to'liq resurslarni taqsimlash grafini amalga oshirish murakkab bo'lsa-da, biz kontseptsiyani soddalashtirilgan tasvir bilan ko'rsatishimiz mumkin.

            // Soddalashtirilgan Resurslarni Taqsimlash Grafi (Kontseptual)
class ResourceAllocationGraph {
  constructor() {
    this.graph = {}; // { jarayon: [ushlab turilgan resurslar], resurs: [kutayotgan jarayonlar] }
  }

  addProcess(process) {
    this.graph[process] = {held: [], waitingFor: null};
  }

  addResource(resource) {
    if(!this.graph[resource]) {
      this.graph[resource] = []; //resursni kutayotgan jarayonlar
    }
  }

  allocateResource(process, resource) {
    if (!this.graph[process]) this.addProcess(process);
    if (!this.graph[resource]) this.addResource(resource);

    if (this.graph[resource].length === 0) {
      this.graph[process].held.push(resource);
      this.graph[resource] = process;

    } else {
      this.graph[process].waitingFor = resource; //jarayon resursni kutmoqda
      this.graph[resource].push(process); //bu resursni kutayotgan navbatga jarayonni qo'shish

    }
  }

  releaseResource(process, resource) {
    const index = this.graph[process].held.indexOf(resource);
    if (index > -1) {
      this.graph[process].held.splice(index, 1);

      this.graph[resource] = null;

    }
  }

  detectCycle() {
    // Siklni aniqlash algoritmini amalga oshirish (masalan, Chuqurlik bo'yicha qidirish - DFS)
    // Bu soddalashtirilgan misol va to'g'ri DFS amalga oshirishni talab qiladi
    // grafdagi sikllarni aniq aniqlash uchun.
    // G'oya - grafni aylanib chiqish va orqaga qaytuvchi qirralarni qidirish.

    let visited = new Set();
    let recursionStack = new Set();

    for (const process in this.graph) {
      if (!visited.has(process)) {
        if (this.dfs(process, visited, recursionStack)) {
          return true; // Sikl aniqlandi
        }
      }
    }

    return false; // Sikl aniqlanmadi
  }

  dfs(process, visited, recursionStack) {
      visited.add(process);
      recursionStack.add(process);

      if (this.graph[process].waitingFor) {
          let resourceWaitingFor = this.graph[process].waitingFor;
          if(this.graph[resourceWaitingFor] !== null) { //Resurs ishlatilmoqda
            let waitingProcess = this.graph[resourceWaitingFor];
            if(recursionStack.has(waitingProcess)) {
              return true; //Sikl Aniqlandi
            }

            if(visited.has(waitingProcess) == false) {
              if(this.dfs(waitingProcess, visited, recursionStack)){
                return true;
              }
            }
          }

      }

      recursionStack.delete(process);
      return false;
  }
}

// Foydalanish Misoli (Kontseptual)
const graph = new ResourceAllocationGraph();
graph.addProcess('processA');
graph.addProcess('processB');
graph.addResource('resource1');
graph.addResource('resource2');

graph.allocateResource('processA', 'resource1');
graph.allocateResource('processB', 'resource2');
graph.allocateResource('processA', 'resource2'); // processA endi resource2 ni kutadi
graph.allocateResource('processB', 'resource1'); // processB endi resource1 ni kutadi

if (graph.detectCycle()) {
  console.log('Deadlock detected!');
} else {
  console.log('No deadlock detected.');
}

            

              
                Copy
              
            
          

Muhim: Bu juda soddalashtirilgan misol. Haqiqiy dunyodagi dastur yanada mustahkam siklni aniqlash algoritmini (masalan, yo'naltirilgan qirralarni to'g'ri qayta ishlaydigan Chuqurlik bo'yicha qidirishdan foydalanish), resurs egalari va kutuvchilarni to'g'ri kuzatishni hamda ilovada ishlatiladigan qulflash mexanizmi bilan integratsiyani talab qiladi.

2. `async-mutex` Kutubxonasidan Foydalanish

JavaScript-ning o'zida tabiiy myutekslar mavjud bo'lmasa-da, `async-mutex` kabi kutubxonalar qulflarni boshqarishning yanada tizimli usulini taqdim etishi mumkin.

            //async-mutex'ni npm orqali o'rnatish
//npm install async-mutex

import { Mutex } from 'async-mutex';

const mutex1 = new Mutex();
const mutex2 = new Mutex();

async function operationWithMutex(resource1, resource2) {
  const release1 = await mutex1.acquire();
  try {
    const release2 = await mutex2.acquire();
    try {
      // resource1 va resource2 bilan operatsiyalarni bajarish
      console.log(`Operation with ${resource1} and ${resource2}`);
    } finally {
      release2(); // mutex2 ni bo'shatish
    }
  } finally {
    release1(); // mutex1 ni bo'shatish
  }
}

            

              
                Copy
              
            
          

Sinov va Monitoring

• Modul Testlari (Unit Tests): Bir vaqtda ishlaydigan stsenariylarni simulyatsiya qilish va qulflarning to'g'ri olinib, bo'shatilishini tekshirish uchun modul testlarini yozing.
• Integratsiya Testlari: Potentsial tiqilib qolishlarni aniqlash uchun ilovaning turli komponentlari o'rtasidagi o'zaro ta'sirni sinab ko'ring.
• To'liq Sikl Testlari (End-to-End Tests): Haqiqiy foydalanuvchi o'zaro ta'sirini simulyatsiya qilish va ishlab chiqarishda yuzaga kelishi mumkin bo'lgan tiqilib qolishlarni aniqlash uchun to'liq sikl testlarini o'tkazing.
• Monitoring: Qulflar uchun raqobatni kuzatish va tiqilib qolishlarga ishora qilishi mumkin bo'lgan unumdorlikdagi to'siqlarni aniqlash uchun monitoringni joriy qiling. Uzoq davom etadigan vazifalarni va bloklangan resurslarni kuzatish uchun brauzerning unumdorlik monitoring vositalaridan foydalaning.

Xulosa

Frontend veb-ilovalaridagi tiqilib qolishlar UI muzlashiga va yomon foydalanuvchi tajribasiga olib kelishi mumkin bo'lgan nozik, ammo jiddiy muammodir. Koffman shartlarini tushunish, resurslarni qulflash siklining oldini olishga e'tibor qaratish va ushbu maqolada keltirilgan strategiyalarni qo'llash orqali siz yanada mustahkam va ishonchli frontend ilovalarini yaratishingiz mumkin. Unutmangki, oldini olish davolashdan har doim yaxshiroqdir va tiqilib qolishlardan birinchi navbatda qochish uchun puxta loyihalash va sinovdan o'tkazish zarur. Frontend kodini qo'llab-quvvatlanadigan holda saqlash va resurslar uchun raqobat muammolarining oldini olish uchun aniq, tushunarli kodga ustunlik bering va asinxron operatsiyalarga e'tiborli bo'ling.

Ushbu usullarni diqqat bilan ko'rib chiqib, ularni o'z ish jarayoningizga integratsiya qilish orqali siz tiqilib qolish xavfini sezilarli darajada kamaytirishingiz va frontend ilovalaringizning umumiy barqarorligi va unumdorligini oshirishingiz mumkin.